<template>
	<view class="booking-orders-submit">
		<view class="booking-orders-submit-card">
			<view class="booking-orders-submit-card-title">
				<text>当前订单信息</text>
			</view>
			<view class="booking-orders-submit-card-content">
				<view class="booking-orders-submit-card-content-text">
					<image
						src="https://cdn3.axureshop.com/demo/1509778/images/%E9%A2%84%E7%BA%A6%E8%AE%A2%E5%8D%95%E6%8F%90%E4%BA%A4/u1266.svg">
					</image>
					<text>预约位置：{{areaData.area.onArea_Data.name}}-{{areaData.area.onDeskName}}-{{JSON.stringify(areaData.area.onSeat_Data)}}号位</text>
				</view>
				<view class="booking-orders-submit-card-content-text">
					<image
						src="https://cdn3.axureshop.com/demo/1509778/images/%E9%A2%84%E7%BA%A6%E8%AE%A2%E5%8D%95%E6%8F%90%E4%BA%A4/u1265.svg">
					</image>
					<text>开始时间：{{areaData.area.onSeatItem.startTime}}</text>
				</view>
				<view class="booking-orders-submit-card-content-text">
					<image
						src="https://cdn3.axureshop.com/demo/1509778/images/%E9%A2%84%E7%BA%A6%E8%AE%A2%E5%8D%95%E6%8F%90%E4%BA%A4/u1265.svg">
					</image>
					<text>结束时间：{{areaData.area.onSeatItem.endTime}}</text>
				</view>
				<view class="booking-orders-submit-card-content-text">
					<image
						src="https://cdn3.axureshop.com/demo/1509778/images/%E9%A2%84%E7%BA%A6%E8%AE%A2%E5%8D%95%E6%8F%90%E4%BA%A4/u1265.svg">
					</image>
					<text>下单时间：{{nowDateTime}}（周五）</text>
				</view>
				<view class="booking-orders-submit-card-content-text">
					<image
						src="https://cdn3.axureshop.com/demo/1509778/images/%E9%A2%84%E7%BA%A6%E8%AE%A2%E5%8D%95%E6%8F%90%E4%BA%A4/u1270.svg">
					</image>
					<text>我的卡券：</text>
					<button @click="use_card">优惠{{offers_info}}元</button>
				</view>
			</view>
		</view>
		<view class="submitBtn">
			<button @click="sureBooking">
				<image
					src="https://cdn3.axureshop.com/demo/1509778/images/%E9%A2%84%E7%BA%A6%E8%AE%A2%E5%8D%95%E6%8F%90%E4%BA%A4/u1269.svg">
				</image>
				<text>确认支付（{{sumPrice}}元）</text>
			</button>
		</view>
	</view>
</template>

<script setup>
	import http from '../../utils/http';
	import {
		ref,
		onMounted,
		computed,
		reactive
	} from 'vue'
	let offers_info = ref()
	let user_Id = ref()
	let sumPrice = ref()
	let nowDateTime = ref()
	let orderTime = ref()
	let orderDateTime = ref()
	let cardData = reactive({info:{
		aname: "",
		cname: "",
		createTime: "",
		expireTime: "",
		pid: 3,
		usable: "",
		useHours: ''
	}})
	
	let areaData = reactive({
		"area": {
			"onArea_Data": {
				"id": "",
				"name": "",
				"remark": "",
				"price": ""
			},
			"onSeat_Data":[],
			"onDeskNameId":"",
			"onDeskName": "",
			"onWeekName": "",
			"onSeatItem": {
				"osid": "",
				"state": "",
				"startTime": "",
				"endTime": "",
				"orderTime": "",
			}
		}
	})

	let cardDataInfo = function(){
		uni.getStorage({
			key: 'card_Data',
			success: function(res) {
				cardData.info = res.data
			},
			fail() {
				return 
			}
		})
	}
		
	let getBookingData = function() {
		cardDataInfo()
		uni.getStorage({
			key: 'areaData',
			success: function(res) {
				areaData.area = res.data
				// console.log(areaData.area)
				// 优惠
				if(offers_info.value == 0 || cardData.info.cardData == null){
					let cheap_price = areaData.area.onArea_Data.price * 0
					offers_info.value = cheap_price
					let sum_price1 = areaData.area.onArea_Data.price * areaData.area.onSeat_Data.length
					sumPrice.value = sum_price1
					
				}else{
					cardDataInfo()
					// console.log('小时2',cardData.info.cardData.useHours)
					let cheap_price = areaData.area.onArea_Data.price * cardData.info.cardData.useHours
					offers_info.value = cheap_price
					let sum_price2 = (areaData.area.onArea_Data.price * areaData.area.onSeat_Data.length) - (areaData.area.onArea_Data.price * cardData.info.cardData.useHours)
					
					sumPrice.value = sum_price2
				}
				// 预约时间
				orderTime.value = orderDateTime.value +' '+ areaData.area.onSeatItem.orderTime
			}
		});
		
	}
	let getPrice = function() {
		getBookingData()
	}
	
	let getNowDate = function() {
		let a = new Date()
		let y = a.getFullYear();
		let m = a.getMonth() + 1;
		m = m < 10 ? "0" + m : m;
		let d = a.getDate();
		d = d < 10 ? "0" + d : d;
		let h = a.getHours();
		h = h < 10 ? "0" + h : h;
		let mm = a.getMinutes();
		mm = mm < 10 ? "0" + mm : mm;
		let s = a.getSeconds();
		s = s < 10 ? "0" + s : s;
		let Time = y + '-' + m + '-' + d + " " + h + ':' + mm + ':' + s
		nowDateTime.value = Time
		orderDateTime.value = y + '-' + m + '-' + d 
		
	}
	let use_card = function() {
		wx.navigateTo({
			url: "../Use_card_submit/Use_card_submit"
		})
	}

	let getUserId = function(){
		uni.getStorage({
			key: 'userId',
			success: function(res) {
				user_Id = res.data
			},
			fail() {
				return 
			}
		})
	}
	let sureBooking = function() {
		getUserId(),
		http({
			url: '/orderseat/creteOrder',
			method: 'put',
			data: {
				ids: JSON.parse(JSON.stringify(areaData.area.onSeat_Data)),
				money: sumPrice.value,
				// seatId: areaData.area.onArea_Data.id,
				seatId:areaData.area.onDeskNameId,
				couponId:cardData.info.cardData.pid,
				createTime:orderTime.value,
				state:6,
				userId: user_Id
			}
		}).then((res) => {
			if (res.code == 0) {
				uni.showLoading({
					title: '预约中...',
					mask: true,
				});
				setTimeout(function() {
					uni.showToast({
						title: '预约成功！',
						icon: 'success',
						duration: 2000
					});
					setTimeout(() => {
						wx.switchTab({
							url: "../Orders/Orders"
						})
					}, 1000)
					uni.hideLoading();
				}, 2000);
			} else {
				uni.showToast({
					title: '支付失败!',
					icon: 'closeempty',
					duration: 1000,
				});
				console.log("支付失败：", res)
			}
		})
	}
		
	onMounted(() => {
		getBookingData(),
		getNowDate(),
		getPrice(),
		cardDataInfo()
	})
</script>

<style scoped lang="less">
	@import url('../../static/fonts/iconfont.css');

	.booking-orders-submit {

		& .booking-orders-submit-card {
			width: 670rpx;
			height: 500rpx;
			margin: 30rpx 40rpx;
			box-shadow: 0 0 10rpx #ccc;
			background: #f7efe5;
			border-radius: 10rpx;
			box-sizing: border-box;

			& .booking-orders-submit-card-title {
				width: 670rpx;
				height: 100rpx;
				line-height: 100rpx;
				padding-left: 30rpx;
				box-sizing: border-box;
				color: #555555;
				font-weight: bold;
				border-bottom: 4rpx solid #e7d2b4;
			}

			& .booking-orders-submit-card-content {
				width: 670rpx;
				height: 400rpx;
				color: #555555;

				& .booking-orders-submit-card-content-text {
					padding: 10rpx 30rpx;
					line-height: 50rpx;

					& image {
						width: 30rpx;
						height: 30rpx;
						vertical-align: middle;
					}

					& text {
						margin-left: 16rpx;
						font-size: 26rpx;
						color: #7f7f7f;
					}

					& button {
						display: inline-block;
						height: 46rpx;
						vertical-align: middle;
						line-height: 46rpx;
						background: #c6964f;
						border-radius: 50rpx;
						color: #ffffff;
						font-size: 30rpx;
					}
				}
			}

		}

		& .submitBtn {
			width: 670rpx;
			height: 100rpx;
			margin: 40rpx;

			& button {
				width: 100%;
				height: 100%;
				background: #c6964f;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border: none;

				& image {
					display: block;
					width: 30rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}

				& text {
					display: block;
				}

			}


		}
	}
</style>
